<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
    <style>
      a {
        color: #000;
        text-decoration: none;
      }
      a.active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 5.设置导航(声明式导航/编程式导航) -->
      <!-- 声明式导航：通过标签实现页面跳转 -->
      <!-- <a href="#/home">首页</a> &nbsp;&nbsp;
      <a href="#/list">列表页</a> -->
      <!-- 
            官方推荐：
                通过 router-link 标签会默认渲染出 a 标签来
                其中 通过 to属性指定跳转链接，不用带上 #  号
      -->
      <!-- <router-link to="/" exact>首页</router-link> -->
      <router-link to="/home" active-class="active">首页</router-link>
      <router-link to="/list" active-class="active">列表页</router-link>

      <!-- 编程式导航：利用js实现页面跳转 -->
      <ul>
        <!-- <li v-for="item in navList" @click="goto(item.path)"> -->
        <li v-for="item in navList" @click="goto(item)">
          <a :class="{active:item.path==currentPath}">{{ item.name }}</a>
        </li>
      </ul>
      <input type="button" value="后退" @click="back" />

      <!-- 6.设置路由出口:系统组件 -->
      <router-view></router-view>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <!-- 1.引入vue-router -->
  <script src="../node_modules/vue-router/dist/vue-router.js"></script>
  <script>
    //2.准备组件
    const Home = {
      template: "<div> 我是 首页 组件</div>",
    };
    const List = {
      template: "<div> 我是 列表页 组件</div>",
    };

    //3.创建路由对象：在里面配置路由表
    let router = new VueRouter({
      // linkActiveClass: "active", //声明式导航才好用
      routes: [
        // {
        //   path: "/", //如果想进来就看到首页：方案一:设置一个 / 路径，默认进来就是看到斜杠，缺陷是会模糊匹配,解决方案是在声明式导航上加上exact.就会进行精准匹配。
        //   component: Home,
        // },
        {
          path: "/home", //如果想进来就看到首页：方案二:设置一个 / 路径，进来就马上重定向到 /home页面。
          component: Home,
          name: "首页",
        },
        {
          path: "/",
          redirect: "/home", //设置重定向
        },
        {
          path: "/list", //点击 /list  匹配 / 和 /list
          component: List,
          name: "列表页",
        },
      ],
    });

    //4.把准备好的路由对象，注入到vue实例里面;后期就可以通过vue的实例找到这个路由对象，实现路由切换
    new Vue({
      el: "#app",
      router, // router: router,
      data: {
        navList: [
          {
            name: "首页",
            path: "/home",
          },
          {
            name: "列表页",
            path: "/list",
          },
        ],
        currentPath: "/home",
      },

      methods: {
        //功能：实现编程式导航
        goto(item) {
          //   console.log(path);
          //   this.$router.push(item.path); //第一个写法 push('/home')
          //   this.$router.push({ path: item.path }); //第二个写法 push({path:'/home'})
          this.$router.push({ name: item.name }); //第二个写法 push({path:'/home'})
          this.currentPath = item.path;
        },

        //功能：实现后退一页
        back() {
          this.$router.back();
        },
      },
    });
  </script>
</html>
